<template>
  <div>
    <el-tree
      ref="Ztree"
      :data="treeData"
      :default-checked-keys="defaultChecked"
      node-key="id"
      :props="defaultProps"
      :show-checkbox="showCheckbox"
      @check="handleCheck"
      @node-click="nodeClick"
    >
      <template #default="{ node }" class="custom-tree-node">
        <span>
          <vui-icon v-if="node.data.icon" :icon="node.data.icon" />
          {{ node.data.label }}
        </span>
        <template v-if="isShowBtn">
          <template v-if="btnFix">
            <span>
              <el-button
                v-if="!node.data.PID"
                size="mini"
                type="text"
                @click="() => changeTree(node, data, { FUNCTION_URI: name == 'padWmsMenu' ? name + 'addChildMenu' : 'addChildMenu' })"
              >
                {{ translateTitle('Dams.ApplicationInterface.新增子级菜单') }}
              </el-button>
            </span>
            <span>
              <el-button
                v-if="node.data.PID && node.data.PID != '100'"
                size="mini"
                type="text"
                @click="() => changeTree(node, data, { FUNCTION_URI: name == 'padWmsMenu' ? name + 'jumpto' : 'jumpto' })"
              >
                {{ translateTitle('Dams.ApplicationInterface.跳转配置') }}
              </el-button>
            </span>
            <span>
              <el-button
                v-if="(node.data.PID || node.data.children.length == 0) && node.data.PID != '100'"
                size="mini"
                type="text"
                @click="() => changeTree(node, data, { FUNCTION_URI: name == 'padWmsMenu' ? name + 'delete' : 'delete' })"
              >
                {{ translateTitle('Dams.ApplicationInterface.删除') }}
              </el-button>
            </span>
            <span>
              <el-button
                size="mini"
                type="text"
                @click="() => changeTree(node, data, { FUNCTION_URI: name == 'padWmsMenu' ? name + 'editor' : 'editor' })"
              >
                {{ translateTitle('Dams.ApplicationInterface.编辑') }}
              </el-button>
            </span>
            <span>
              <el-button
                size="mini"
                type="text"
                @click="() => changeTree(node, data, { FUNCTION_URI: name == 'padWmsMenu' ? name + 'addMenu' : 'addMenu' })"
              >
                {{ translateTitle('Dams.ApplicationInterface.新增同级') }}
              </el-button>
            </span>
          </template>
          <template v-else>
            <span v-for="(item, index) in treeOperation" :key="index">
              <el-button
                v-if="item.FUNCTION_URI == 'addChildMenu' && !node.data.PID"
                size="mini"
                type="text"
                @click="() => changeTree(node, data, item)"
              >
                {{ item.BUTTON_NAME }}
              </el-button>
              <el-button
                v-else-if="(node.data.PID || node.data.children.length == 0) && item.FUNCTION_URI == 'delete' && name != 'RoleMenuButton'"
                size="mini"
                type="text"
                @click="() => changeTree(node, data, item)"
              >
                {{ item.BUTTON_NAME }}
              </el-button>
              <el-button
                v-else-if="item.FUNCTION_URI == 'jumpto' && node.data.PID"
                size="mini"
                type="text"
                @click="() => changeTree(node, data, item)"
              >
                {{ item.BUTTON_NAME }}
              </el-button>
              <el-button
                v-else-if="item.FUNCTION_URI != 'addChildMenu' && item.FUNCTION_URI != 'delete' && item.FUNCTION_URI != 'jumpto'"
                size="mini"
                type="text"
                @click="() => changeTree(node, data, item)"
              >
                {{ item.BUTTON_NAME }}
              </el-button>
            </span>
          </template>
        </template>
      </template>
    </el-tree>
  </div>
</template>
<script>
  import { translateTitle } from '@/utils/i18n'
  export default {
    name: 'Tree',
    props: {
      //树形数据
      treeData: {
        type: Array,
        default: () => [],
      },
      //是否多选
      showCheckbox: {
        type: Boolean,
        default: false,
      },
      btnFix: {
        type: Boolean,
        default: false,
      },
      isShowBtn: {
        type: Boolean,
        default: false,
      },
      btns: {
        type: Array,
        default: () => [],
      },
      // 默认选中数组
      checkedKeys: {
        type: Array,
        default: () => [],
      },
      name: {
        type: String,
        default: '',
      },
    },
    emits: ['checkedChange', 'update:modelValue'],
    data() {
      return {
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        treeOperation: [],
      }
    },
    computed: {
      defaultChecked() {
        console.log(this.checkedKeys)
        return this.checkedKeys
      },
    },
    watch: {
      checkedKeys(newval) {
        this.$refs.Ztree.setCheckedKeys(newval)
      },
    },
    created() {
      let menuBtns = this.$store.getters['user/menuBtns']
      menuBtns.forEach((row) => {
        if (this.$route.name.indexOf(row.MENU_CODE) > -1 && row.SHOW_POSTION == 'treeOperation') {
          this.treeOperation.push(row)
        }
      })
      console.log('this.treeOperation', this.treeOperation)
    },
    methods: {
      translateTitle,
      nodeClick(node) {
        this.$pub(`${this.name}_nodeClick`, node)
      },
      changeTree(node, data, item) {
        this.$pub(item.FUNCTION_URI, node)
      },
      handleCheck(nodes, data) {
        let labels = []
        data.checkedNodes.forEach((v) => {
          labels.push(v[this.defaultProps.label])
        })
        // emit
        this.$emit('checkedChange', {
          multiples: data.checkedNodes,
          keys: data.checkedKeys,
        })
        this.$emit('update:modelValue', data.checkedKeys)
      },
    },
  }
</script>
<style lang="scss" scoped>
  :deep() {
    .el-tree-node.is-current > .el-tree-node__content {
      background: #e6f7ff;
    }
  }
</style>
